<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Processing Service</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .progress {
            height: 25px;
        }
        #dropArea {
            border: 2px dashed #ccc;
            padding: 40px;
            text-align: center;
            margin-bottom: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }
        #dropArea.highlight {
            border-color: #0d6efd;
            background-color: #f8f9fa;
        }
        .section {
            display: none;
        }
        #uploadSection {
            display: block;
        }
        #errorSection {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <h1 class="text-center mb-4">Video Processing Service</h1>
                
                <!-- Upload Section -->
                <div id="uploadSection" class="section">
                    <div id="dropArea">
                        <h4>Drag & Drop your video here or click to select</h4>
                        <p class="text-muted">Supported formats: MP4, MOV, AVI, MKV (Max 500MB)</p>
                        <input type="file" id="fileInput" class="d-none" accept="video/*">
                        <button class="btn btn-primary mt-3" onclick="document.getElementById('fileInput').click()">
                            Select File
                        </button>
                    </div>
                    <div class="text-center">
                        <button id="uploadBtn" class="btn btn-success btn-lg">Upload & Process</button>
                    </div>
                </div>
                
                <!-- Processing Section -->
                <div id="processingSection" class="section">
                    <h4 class="mb-3">Processing Progress</h4>
                    <div class="progress mb-3">
                        <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" 
                             role="progressbar" style="width: 0%">0%</div>
                    </div>
                    <p id="statusText" class="text-muted">Preparing to process...</p>
                </div>
                
                <!-- Download Section -->
                <div id="downloadSection" class="section text-center">
                    <h4 class="mb-4">Video Processing Complete!</h4>
                    <a id="downloadBtn" class="btn btn-primary btn-lg">
                        Download Processed Video
                    </a>
                    <div class="mt-4">
                        <button id="processAnotherBtn" class="btn btn-outline-secondary">
                            Process Another Video
                        </button>
                    </div>
                </div>
                
                <!-- Error Section -->
                <div id="errorSection" class="alert alert-danger mt-3"></div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>
